<div th:fragment="myHeader" class="common-header-myHeader">
    <style>
        .common-header-myHeader {
            background-color: #333;
        }
    </style>
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; color: white; font-size: 20px;">
        <div><a href="/">首页</a></div>

        <!-- ------------------------------------  -->
        <div>
            <div th:if="${logged_User_Id != null}">
                <a href="/user/me" th:text="${logged_User_Nickname}"></a>
                <!--    <h2><a href="/login/logout">Logout</a></h2>-->
            </div>
            <div th:if="${logged_User_Id == null}">
                <a target="" href="/login">登录 L </a> &nbsp;&nbsp;
                <a target="" href="/register">注册 R </a>
            </div>
        </div>

        <!-- ------------------------------------  -->
        <div>
            <div onclick="document.getElementById('header-modal').classList.remove('hidden')" style="cursor: pointer; ">
                <!--      更多  svg  图标     -->
                <?xml version="1.0" encoding="UTF-8"?>
                <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4Z" fill="none" stroke="#999" stroke-width="4" stroke-linejoin="round"/>
                    <path d="M18 28H6C4.89543 28 4 28.8954 4 30V42C4 43.1046 4.89543 44 6 44H18C19.1046 44 20 43.1046 20 42V30C20 28.8954 19.1046 28 18 28Z" fill="none" stroke="#999" stroke-width="4" stroke-linejoin="round"/>
                    <path d="M42 4H30C28.8954 4 28 4.89543 28 6V18C28 19.1046 28.8954 20 30 20H42C43.1046 20 44 19.1046 44 18V6C44 4.89543 43.1046 4 42 4Z" fill="none" stroke="#999" stroke-width="4" stroke-linejoin="round"/>
                    <path d="M28 28H44" stroke="#999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M36 36H44" stroke="#999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M28 44H44" stroke="#999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <style>
                .tag-link:hover {
                    background: #333;
                    border-radius: 6px;
                }

                #header-modal ul li {
                    display: inline-block;
                }

                .tag-link {
                    font-size: 22px;
                    display: block;
                    margin: 8px;
                    padding: 12px;
                    border-radius: 6px;
                    background: #333;
                    text-decoration: none;
                }

                /* 关闭按钮 */
                .closeBtn {
                    position: absolute;
                    top: 25px;
                    right: 25px;
                    font-size: 50px;
                    font-weight: bolder;
                    color: white;
                    cursor: pointer;
                    padding: 12px;
                    border-radius: 50%;
                }
            </style>
            <div id="header-modal" class="hidden" style=" position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background-color: rgba(22, 22, 22); overflow: auto;  ">
                <div style="max-width: 560px; margin: 0 auto;   ">
                    <span class="closeBtn" onclick="document.getElementById('header-modal').classList.add('hidden')">×</span>
                    <br><br>
                    <div style="background:rgb(33,33,33);  border-radius: 6px; padding: 20px; margin-bottom: 22px;    ">
                        <p style="font-size: 33px; text-align: center; ">论坛</p>

                        <ul id="category-list">
                            <li><a href="/users"  class="tag-link">  users  </a> </li>
                            <li><a href="#"  class="tag-link">bbbbbb</a> </li>
                            <li><a href="#"  class="tag-link">cccccc</a> </li>
                        </ul>


                        <!--                        <a href="/post/list/0" class="tag-link">综合论坛</a>-->
                        <!--                        <a href="/post/list/20" class="tag-link">丝袜</a>-->
                        <!--                        <a href="/post/list/21" class="tag-link">恋臀</a>-->
                        <!--                        <a href="/post/list/22" class="tag-link">高跟鞋</a>-->
                        <!--                        <a href="/post/list/23" class="tag-link">重口猎奇</a>-->
                        <!--                        <a href="/post/list/24" class="tag-link">调教</a>-->
                        <!--                        <a href="/post/list/25" class="tag-link">吃瓜</a>-->
                        <!--                        <a href="/post/list/26" class="tag-link">露出</a>-->
                        <!--                        <a href="/post/list/27" class="tag-link">性爱技巧</a>-->
                        <!--                        <a href="/post/list/28" class="tag-link">色情游戏</a>-->
                        <!--                        <a href="/post/list/29" class="tag-link">求助</a>-->
                        <!--                        <a href="/post/list/30" class="tag-link">人妻</a>-->
                        <!--                        <a href="/post/list/31" class="tag-link">熟女</a>-->
                        <!--                        <a href="/post/list/32" class="tag-link">资源分享</a>-->


                    </div>

                    <!--     -----------------------------------------------------               -->
                    <div style="background:rgb(33,33,33);  border-radius: 6px; padding: 20px; margin-bottom: 22px;   ">
                        <p style="font-size: 33px; text-align: center; ">树洞倾诉</p>
                        <ul>
                            <li><a href="/secret/list/10" class="tag-link">性</a></li>
                            <li><a href="/secret/list/11" class="tag-link">琐事烦恼</a></li>
                        </ul>


                        <!--                        <a href="/secret/12"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/13"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/14"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/15"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/16"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/17"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/18"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/19"  class="tag-link">性</a>-->
                        <!--                        <a href="/secret/20"  class="tag-link">性</a>-->
                    </div>


                    <!--     -----------------------------------------------------               -->
                    <div style="background:rgb(33,33,33);  border-radius: 6px; padding: 20px; margin-bottom: 22px;   ">
                        <ul>
                            <li><a href="/about" class="tag-link">关于 </a></li>
                            <li><a href="/article/list" class="tag-link">关于本站</a></li>
                            <li><a href="/advice_bug" class="tag-link">  建议 | 反馈 </a></li>
                        </ul>
                    </div>


                </div>

                <div style="height: 300px; "></div>

            </div>
        </div>
    </div>
</div>

帮我设计美观的 common-header , 包括 css